<template>
  <div>
    <div class="tab_box" :style="{ height: tabHeight }">
      <div
        v-for="item in editableTabs"
        :key="item.id"
        class="title_box"
        :class="item.id == editableTabsValue ? 'title_box_active' : ''"
        @click="handActive(item)"
      >
        <div class="title">{{ item.conditionId }}</div>
        <span
          v-if="item.id == editableTabsValue"
          @click.stop="handDelete(item.id)"
          style="
            color: #2680d2;
            font-size: 10px;
            margin-left: 6px;
            min-width: 14px;
            height: 14px;
          "
          class="el-icon-close"
        ></span>
      </div>
      <div
        @click="handAddTab()"
        class="el-icon-plus add_icon"
        style="color: #000000; font-size: 12px"
      ></div>
    </div>
    <div
      class="open_btn"
      v-if="editableTabs.length >= 11 && tabHeight == '100%'"
      @click="closeOpenTab('70px')"
    >
      <span class="title"> 关闭全部标签 </span>
      <svg-icon icon-class="open" class="open_icon"></svg-icon>
    </div>
    <div class="open_btn close_btn" v-else @click="closeOpenTab('100%')">
      <svg-icon icon-class="open" class="open_icon"></svg-icon>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    editableTabs: {
      type: Array,
      default: () => [],
    },
    editableTabsValue: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      tabHeight: "100%",
    };
  },
  methods: {
    closeOpenTab(px) {
      this.tabHeight = px;
    },
    handDelete(id) {
      this.$emit("handDelete", id);
    },
    handAddTab() {
      this.$emit("handAddTab", "add");
    },
    handActive(item) {
      this.$emit("handActive", item);
      this.$emit("update:editableTabsValue", item.id);
      // this.activeIndex = id;
    },
  },
};
</script>
<style lang="scss" scoped>
.open_btn {
  border-bottom: 1px solid #e4e4e4;
  border-top: 1px solid #f5f5f5;
  margin-top: 10px;
  position: relative;
  padding: 6px 0;
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  .open_icon {
    position: absolute;
    bottom: -7px;
    transform: rotate(-90deg);
  }
  .title {
    font-size: 12px;
    color: #666666;
  }
}
.close_btn {
  border-top: 0;
  margin-top: 0;
  .open_icon {
    position: absolute;
    bottom: -10px;
    transform: rotate(90deg);
  }
}
.el-icon-close {
  border-radius: 50%;
  /* text-align: center; */
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  /* line-height: 15px; */
  /* vertical-align: middle; */
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-icon-close:hover {
  background-color: #c0c4cc;
  color: #fff !important;
}
.tab_box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  overflow-y: auto;
  .add_icon {
    cursor: pointer;
    height: 35px;
    width: 20%;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.title_box {
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  position: relative;
  width: 20%;
  cursor: pointer;
  &::after {
    content: "";
    position: absolute;
    right: 0;
    width: 1px;
    background-color: #e4e4e4;
    height: 14px;
    top: 50%;
    transform: translate(0, -50%);
  }
  .title {
    font-size: 14px;
    color: #707070;
    &:hover {
      color: #2680d2;
    }
    /* margin-right: 6px; */
  }
}
.title_box_active {
  .title {
    color: #2680d2;
  }
  &::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #2680d2;
    height: 2px;
  }
}
.title_box:nth-child(5n) {
  &::after {
    display: none;
  }
}
</style>